<template>
    <div >
        <el-form :model="personalCenterFrom" label-width="80px" :rules="rules" ref="ruleForm">
            <el-form-item label="商家头像" >
                <el-upload
                        class="avatar-uploader"
                        action="http://192.168.1.42:82/system/tbBusiness/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        style="width: 300px">
                    <img v-if="personalCenterFrom.bicon" :src="personalCenterFrom.bicon" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="营业执照" >
                <el-upload
                        class="avatar-uploader"
                        action="http://192.168.1.42:82/system/tbBusiness/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess01"
                        :before-upload="beforeAvatarUpload"
                style="width: 400px">
                    <img v-if="personalCenterFrom.license" :src="personalCenterFrom.license" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="商家名" prop="bname">
                <el-input v-model="personalCenterFrom.bname" placeholder="商家名" style="width: 400px" readonly="readonly"></el-input>
            </el-form-item>
            <el-form-item label="商家余额" prop="money">
                <el-input v-model="personalCenterFrom.money" placeholder="商家余额" style="width: 400px" readonly="readonly"></el-input>
            </el-form-item>
            <el-form-item label="电话号" prop="telephone">
                <el-input v-model="personalCenterFrom.telephone" placeholder="电话号" style="width: 400px"></el-input>
            </el-form-item>
            <el-form-item label="支付宝号" prop="payaccount">
                <el-input v-model="personalCenterFrom.payaccount" placeholder="支付宝账号" style="width: 400px"></el-input>
            </el-form-item>
            <el-form-item label="入注日期" prop="during" >
                <el-date-picker
                        v-model="personalCenterFrom.enterdate"
                        type="datetime"
                        placeholder="选择有效日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        readonly="readonly">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="editFrom">修改</el-button>
                <el-button type="primary" @click="editMoney">提现</el-button>
            </el-form-item>
        </el-form>
        <!--        商品入店弹出层-->
        <el-dialog
                title="详细信息"
                :visible.sync="editMoneyToShopVisiable"
                width="30%">
            <el-form :model="editMoneyFrom" status-icon label-width="100px" class="demo-ruleForm" :rules="rules02" ref="ruleForm02">
                <el-form-item label="商品进价" prop="purchaseprice">
                    <el-input v-model="editMoneyFrom.withdrawamount" ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editMoneyToShopVisiable = false">关闭</el-button>
                <el-button @click="confirmWithdraw">提交</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "TeacherCenter",
        data(){
            return{
                editMoneyFrom:{},
                editMoneyToShopVisiable:false,
                personalCenterFrom:{}
            }
        },
        created() {
            this.initTable()
        },
        methods:{
            confirmWithdraw(){
                if(this.editMoneyFrom.withdrawamount>this.personalCenterFrom.money||this.editMoneyFrom.withdrawamount<=0){
                    this.$message.error("余额不足或提现金额不能为负数")
                }else {
                    this.$http.post("/system/tbBusiness/withdrawamount/"+this.editMoneyFrom.withdrawamount).then(result => {
                        if (result.data.code == 2000) {
                            this.$message.success(result.data.msg)
                            this.editMoneyToShopVisiable = false;
                            this.initTable()
                        } else {
                            this.$message.error(result.data.msg)
                        }
                    })
                }
            },
            editMoney(){
                 if(this.personalCenterFrom.money>0){
                     this.editMoneyToShopVisiable = true
                 }else{
                     this.$message.error("商家余额不足")
                 }
            },
            editFrom(){
                this.$http.post("/system/tbBusiness/editBusinessMsg",this.personalCenterFrom).then(result=>{
                    if(result.data.code==2000){
                        this.$message.success("修改成功")
                        this.initTable()
                    }else{
                        this.$message.error("修改失败")
                    }
                })
            },
            initTable(){
                this.$http.get("/system/tbBusiness/findBusinessMsg").then(result=>{
                    console.log(result)
                    this.personalCenterFrom = result.data.data
                })
            },
            handleAvatarSuccess(res,file){
                this.personalCenterFrom.bicon = res.data
            },
            handleAvatarSuccess01(res,file){
                this.personalCenterFrom.license = res.data
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        }
    }
</script>

<style >

</style>